<template>
  <div class="drawer-box">
    <Transition name="background">
      <div v-if="open" class="drawer-background" @click="emit('update:open', false)"></div>
    </Transition>

    <div class="drawer" :class="[{ 'show-drawer': open }, placementStyle]">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  open: boolean
  palcement: 'right' | 'left'
}

const props = withDefaults(defineProps<Props>(), {
  open: false,
  palcement: 'right'
})

const emit = defineEmits(['update:open'])

const placementStyle = ref('placement-right')

onMounted(() => {
  switch (props.palcement) {
    case 'right':
      placementStyle.value = 'placement-right'
      break
    case 'left':
      placementStyle.value = 'placement-left'
      break
    default:
      break
  }
})
</script>

<style scoped lang="scss">
.drawer-box {
  position: absolute;
  top: 0;
  left: 0;

  .drawer-background {
    position: absolute;
    width: 100vh;
    height: 100vh;
    background: #0000002f;
    transition: 0.4s;
  }

  .drawer {
    position: fixed;

    width: 400px;
    height: 100vh;
    background: #fff;
    transition: 0.4s;
    display: flex;
  }

  .placement-right {
    right: 0;
    transform: translateX(400px);
  }

  .placement-left {
    left: 0;
    transform: translateX(-400px);
  }

  .show-drawer {
    transform: translateX(0);
  }
}

.background-enter-active,
.background-leave-active {
  opacity: 1;
}
.background-enter-from,
.background-leave-to {
  opacity: 0;
}
</style>
